<template>
  <div ref="userEdit">
    <!-- <Modal
      v-model="user.userEditModalSta"
      title="编辑用户"
      :loading="loading"
      @on-ok="userEditOk"
      @on-cancel="userEditCancel"
    >
      <Row>
        <XCol :span="20">
          <Form
            ref="userEditForm"
            :model="user.userOneSta"
            :rules="userEditRule"
            label-position="right"
            :label-width="100"
          >
            <FormItem label="用户ID" prop="id">
              <XInput v-model="user.userOneSta.id" disabled></XInput>
            </FormItem>
            <FormItem label="用户名" prop="name">
              <XInput v-model="user.userOneSta.name"></XInput>
            </FormItem>
            <FormItem label="密码" prop="password">
              <XInput
                type="password"
                v-model="user.userOneSta.password"
              ></XInput>
            </FormItem>
            <FormItem label="确认密码" prop="verifyPassword">
              <XInput
                type="password"
                v-model="user.userOneSta.verifyPassword"
              ></XInput>
            </FormItem>
          </Form>
        </XCol>
      </Row>
    </Modal> -->
  </div>
</template>
<script>
// import { Modal, Row, Col, Form, FormItem } from "iview";
export default {
  name: "UserEdit",
  data() {
    //确认密码
    const verifyPasswordRuleFn = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请确认新密码"));
      } else if (value != this.user.userOneSta.password) {
        callback(new Error("确认密码和密码不一致"));
      } else {
        callback();
      }
    };
    return {
      loading: true,
      userEditForm: {
        id: "",
        name: "",
        password: "",
        verifyPassword: ""
      },
      //表单验证规则
      userEditRule: {
        id: {
          required: true,
          message: "请输入用户名",
          trigger: "blur"
        },
        name: {
          required: true,
          message: "请输入用户名",
          trigger: "blur"
        },
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ],
        verifyPassword: [
          {
            required: true,
            validator: verifyPasswordRuleFn,
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {
    //提交
    userEditOk() {
      let _self = this;
      this.$refs["userEditForm"].validate(valid => {
        if (valid) {
          setTimeout(() => {
            let obj = this.$qs.stringify({
              id: this.user.userOneSta.id,
              name: this.user.userOneSta.name,
              password: this.user.userOneSta.password,
              crtime: this.user.userOneSta.crtime,
              chtime: new Date()
            });
            //根据用户id获取用户角色
            this.$axios.post("/acl_user/updateUser", obj).then(res => {
              if (res.data) {
                _self.userEditModalMut({
                  state: false
                }); //关闭模态框
                _self.userListUpdateOneMut({
                  state: res.data
                }); //更新数据
                _self.$refs["userEditForm"].resetFields(); //清空表单
              }
            });
          }, 1000);
        } else {
          //动画
          this.loading = false;
          this.$nextTick(() => {
            this.loading = true;
          });
        }
      });
    },
    //取消
    userEditCancel() {
      this.$refs["userEditForm"].resetFields();
    }
  },
  components: {
    // Modal,
    // Row,
    // XCol: Col,
    // Form,
    // FormItem
  }
};
</script>
